<template>
    <div class="person">
        <h2>{{ num }}</h2>
        <button @click="addNum">点我+1</button>
    </div>
</template>

<!-- 
    vue3的四个声明周期：
        创建阶段
        挂载阶段：
        更新阶段：
        卸载阶段
-->
<script lang="ts" setup name="Person">
    
    import {ref} from 'vue'

    let num = ref(0);
   
    function addNum() {
        num.value += 1
    }

    // 创建阶段
    // setup其实就是挂载阶段，也就是挂载的相关代码可以直接写在此处
    console.log('子-创建完毕!')

    // 挂载阶段(该页面被加载时触发)
    import { onBeforeMount, onMounted } from 'vue';
    onBeforeMount(()=>{
        console.log("子-挂载前")
    })

    onMounted(()=>{
        console.log("子-挂载后")
    })

    // 更新阶段(在点击更新按钮时会触发)
    import { onBeforeUpdate, onUpdated } from 'vue';
    onBeforeUpdate(()=>{
        console.log("更新前")
    })

    onUpdated(()=>{
        console.log("更新后")
    })

    // 卸载阶段(页面销毁时触发，由父页面销毁)
    import { onBeforeUnmount, onUnmounted } from 'vue';
    onBeforeUnmount(()=>{
        console.log("卸载前")
    })

    onUnmounted(()=>{
        console.log("卸载后")
    })

</script>

<style scoped>
.person {
    background-color: skyblue;
    box-shadow: 0 0 10px;
    border-radius: 10px;
    padding: 20px;
}

button {
    margin: 0 5px;
}
</style>